<!-- 设置按钮 -->
<button nz-button nzType="primary" nzSize="small" (click)="showModal()" style="margin-bottom: 8px;">
  <span nz-icon nzType="setting" nzTheme="outline"></span>
</button>
<!-- 表格部分 -->
<nz-table #basicTable [nzData]="listOfData" [nzCustomColumn]="customColumn">
  <thead>
    <tr>
      <th *ngFor="let col of customColumn;let $i = index;" [nzCellControl]="col.value">{{col.name}}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data;let $index = index; ">
      <td *ngFor="let row of customColumn;let $i = index;" [nzCellControl]="row.value"
        [innerHTML]="row.render?row.render(data,$index):data[row.value]|safeHtml">
      </td>
    </tr>
  </tbody>
</nz-table>
<!-- 弹框 -->
<nz-modal [(nzVisible)]="isVisible" nzTitle="自定义表格列" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <ng-container *nzModalContent>
    <div nz-row [nzGutter]="24">
      <div nz-col class="gutter-row" [nzSpan]="12">
        <div class="example-container">
          <p>显示列 (拖拽排序)</p>
          <div class="example-box" *ngFor="let item of title">
            {{ item.name }}
          </div>
          <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="fix" [cdkDropListConnectedTo]="[doneList]"
            class="example-list" (cdkDropListDropped)="drop($event)">
            <div class="example-box" *ngFor="let item of fix; let i = index" cdkDrag>
              {{ item.name }}
              <span nz-icon nzType="minus-circle" nzTheme="outline" (click)="deleteCustom(item, i)"></span>
            </div>
          </div>
          <div class="example-box" *ngFor="let item of footer">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div nz-col class="gutter-row" [nzSpan]="12">
        <div class="example-container">
          <p>隐藏列</p>
          <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="notFix" [cdkDropListConnectedTo]="[todoList]"
            class="example-list" (cdkDropListDropped)="drop($event)">
            <div class="example-box" *ngFor="let item of notFix; let i = index" cdkDrag>
              {{ item.name }}
              <span nz-icon nzType="plus-circle" nzTheme="outline" (click)="addCustom(item, i)"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-container>
</nz-modal>